<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="scss/01.min.css">
	</head>
	<body>
		<div id="app">
            <h2>个人信息</h2>
            <div class="item">姓名：<input type="text" :value="persion.name"></div>            
            <div class="item">年龄：<input type="number" :value="persion.age"></div>           
            <div class="item">身高：<input type="number" v-model="persion.height" :value="persion.height"></div>
            <div class="item_icon" v-if="persion.height>=180">兄弟啊，再有八块腹肌会更好！</div>
            <div class="item_icon" v-else-if="persion.height>=170">该用功学习了，不然没对象啦！</div>
            <div class="item_icon" v-else-if="persion.height>=160">兄弟啊，咱身高一般，但智商高啊！</div>
            <div class="item_icon" v-else>别理他们，咱浓缩的都是精华！</div>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data(){
					return{
                        persion: {name:'小明',age: 20,height: 197}
					}
				}
            }).mount('#app');
		</script>
	</body>
</html>
